<!-- src/views/message/MessageCenter.vue -->
<template>
  <div class="message-container">
    <!-- 顶部导航栏 -->
    <HeaderComponents/>
    <br>

    <!-- 消息内容区域 -->
    <section class="message-section">
      <!-- 消息分类标签 -->
      <div class="tab-bar">
        <button
            v-for="tab in tabs"
            :key="tab.type"
            class="message-tab"
            :class="{ active: activeTab === tab.type }"
            @click="switchTab(tab.type)"
        >
          {{ tab.name }}
        </button>
      </div>

      <!-- 未读提示 -->
      <div v-if="unreadCount > 0" class="unread-tip">
        <i class="fa fa-info-circle"></i> 您有{{ unreadCount }}条未读消息
      </div>

      <!-- 消息列表 -->
      <div class="message-list">
        <template v-if="activeTab === 'private'">
          <PrivateMessageLayout
              :userId="userId"
              @mark-read="markRead"
              @delete-message="deleteMessage"
          />
        </template>

        <!-- 添加通知消息的特殊处理 -->
        <template v-else-if="activeTab === 'notification'">
          <NotificationMessage
              :messages="filteredMessages"
              @mark-read="markRead"
              @delete-message="deleteMessage"
          />
        </template>

        <template v-else>
          <MessageList
              :title="activeTabName"
              :messages="filteredMessages"
              :type="activeTab"
              @mark-read="markRead"
              @delete-message="deleteMessage"
          />
        </template>

      </div>
    </section>
  </div>
</template>

<script>
import MessageList from './MessageList.vue'; // 引入统一的列表组件
import PrivateMessageLayout from './PrivateMessageLayout.vue';
import messageApi from '@/api/message';
import { useUserStore } from '@/store/userStore';
import SearchInput from "@/components/SearchInput.vue";
import header from "@/components/HeaderComponents.vue";
import HeaderComponents from "@/components/HeaderComponents.vue";
import NotificationMessage from "@/views/message/NotificationMessage.vue";

export default {
  components: {
    NotificationMessage,
    HeaderComponents,
    MessageList,
    PrivateMessageLayout,
    SearchInput,
    header
  },
  data() {
    return {
      activeTab: 'like', // 默认显示点赞
      tabs: [
        { type: 'like', name: '点赞' },
        { type: 'comment', name: '评论' },
        { type: 'follow', name: '关注' },
        { type: 'private', name: '私信' },
        { type: 'notification', name: '通知' }
      ],
      allMessages: {
        like: [],
        comment: [],
        follow: [],
        private: [],
        notification: []
      },
      isLoading: false
    };
  },
  setup() {
    const userStore = useUserStore();
    return { userId: userStore.userId };
  },
  computed: {
    activeTabName() {
      return this.tabs.find(t => t.type === this.activeTab)?.name || '消息';
    },
    filteredMessages() {
      return this.allMessages[this.activeTab] || [];
    },
    unreadCount() {
      return Object.values(this.allMessages)
          .flat()
          .filter(msg => !msg.isRead).length;
    }
  },
  created() {
    this.fetchMessages();
  },
  methods: {
    components:{
      SearchInput
    },
    async fetchMessages() {
      this.isLoading = true;
      try {
        // 使用独立请求，避免一个失败影响全部
        this.allMessages.like = await this.fetchMessageType('getLikeMessages');
        this.allMessages.comment = await this.fetchMessageType('getCommentMessages');
        this.allMessages.follow = await this.fetchMessageType('getFollowMessages');
        this.allMessages.private = await this.fetchMessageType('getPrivateSessions');
        this.allMessages.notification = await this.fetchMessageType('getActivityNotifications');
      } catch (error) {
        console.error('获取消息失败:', error);
      } finally {
        this.isLoading = false;
      }
    },
    async fetchMessageType(apiMethod) {
      try {
        const res = await messageApi[apiMethod](this.userId);
        console.log('apiMethod', apiMethod);
        console.log(res);
        console.log('\n');
        return res.data.data || [];
      } catch (error) {
        console.error(`${apiMethod} 请求失败:`, error);
        return [];
      }
    },
    switchTab(tabType) {
      this.activeTab = tabType;
    },
    async markRead(activityId) {
      try {
        // 调用API标记为已读
        await messageApi.markNotificationAsRead(activityId);

        // 更新本地状态
        const notification = this.allMessages.notification.find(n => n.activityId === activityId);
        if (notification) {
          notification.isRead = true;
        }
      } catch (error) {
        console.error('标记已读失败:', error);
      }
    },

    async deleteMessage(activityId) {
      try {
        // 调用API删除消息
        await messageApi.deleteNotification(activityId);

        // 更新本地状态
        this.allMessages.notification = this.allMessages.notification.filter(
            n => n.activityId !== activityId
        );
      } catch (error) {
        console.error('删除消息失败:', error);
      }
    }
  }
};
</script>

<style scoped>
.message-container {
  font-family: 'Open Sans', sans-serif;
  background-color: #f5f7fa;
  color: #333;
  padding-top: 10px; /* 适配固定 header */
}

/* 消息分类标签 */
.tab-bar {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
  padding: 0.5rem 1.5rem;
  background-color: #f9fafb;
}

.message-tab {
  padding: 0.5rem 1rem;
  margin-right: 0.5rem;
  border-radius: 0.5rem;
  font-weight: 500;
  transition: all 0.3s;
  cursor: pointer;
  white-space: nowrap;
}

.message-tab.active {
  background-color: #bfdbfe;
  color: #2563eb;
}

/* 未读提示 */
.unread-tip {
  background-color: #bfdbfe;
  border-left: 4px solid #2563eb;
  padding: 0.75rem 1rem;
  margin: 1rem 1.5rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: center;
  font-size: 0.875rem;
  color: #1e40af;
}

.unread-tip .fa-info-circle {
  margin-right: 0.5rem;
}

/* 消息列表容器 */
.message-list {
  padding: 1rem 1.5rem;
  max-width: 64rem;
  margin: 0 auto;
}

/* 消息卡片 */
.message-card {
  background-color: #fff;
  border-radius: 0.75rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: background-color 0.3s;
}

.message-card:hover {
  background-color: #f9fafb;
}

/* 消息头部 */
.post-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.5rem;
}

.avatar {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  margin-right: 1rem;
}

.post-info {
  flex: 1;
}

.post-info .name {
  font-weight: 600;
  margin-bottom: 0.25rem;
}

.post-info .time {
  color: #9ca3af;
  font-size: 0.75rem;
}

.unread-indicator {
  width: 0.5rem;
  height: 0.5rem;
  background-color: #F97316;
  border-radius: 50%;
  margin-left: 0.5rem;
}

/* 消息内容 */
.post-content {
  margin-bottom: 0.75rem;
}

.post-content p {
  font-size: 0.875rem;
  color: #4b5563;
}

/* 帖子预览 */
.post-preview {
  background-color: #f3f4f6;
  border-radius: 0.5rem;
  padding: 0.75rem;
  display: flex;
  align-items: center;
  margin-top: 0.5rem;
}

.post-image {
  width: 3rem;
  height: 3rem;
  border-radius: 0.375rem;
  margin-right: 1rem;
}

.post-title {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1f2937;
  flex: 1;
}

.like-count,
.comment-count {
  display: flex;
  align-items: center;
  color: #3B82F6;
  font-size: 0.75rem;
  margin-left: 1rem;
}

.like-count .fa-heart,
.comment-count .fa-comment {
  margin-right: 0.25rem;
}

/* 操作按钮 */
.message-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}

.message-actions button {
  background-color: transparent;
  border: none;
  color: #3B82F6;
  font-size: 0.75rem;
  cursor: pointer;
}

.message-actions button:hover {
  text-decoration: underline;
}


.logo {
  font-size: 24px;
  font-weight: bold;
  color: #1e88e5;
}

.search-container {
  display: flex;
  align-items: center;
  flex-grow: 1;
  max-width: 500px;
  margin: 0 20px;
}

.search-box {
  flex-grow: 1;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px 0 0 4px;
  box-sizing: border-box;
}

.search-button {
  padding: 8px 15px;
  background-color: #1e88e5;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
}

.search-button:hover {
  background-color: #0d47a1;
}

.nav-links {
  display: flex;
  gap: 15px;
}

.nav-links a, .nav-links router-link {
  color: #333;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
}

.nav-links a:hover, .nav-links router-link:hover {
  background-color: #e3f2fd;
}

.active {
  background-color: #e3f2fd;
  color: #1e88e5 !important;
}



</style>